<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">

        #div1{
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #div2{
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }

    </style>
    <script type="text/javascript">
        window.onload = function(){
          //当鼠标在div1中移动时，在div2中来显示鼠标的坐标
            var div1=document.getElementById("div1");
            var div2=document.getElementById("div2");
            div1.onmousemove=function (event) {
                //在IE8中，响应函数被触发时，浏览器不会传递事件对象，在IE8以下的版本中，是将事件对象作为window对象属性保存的
                // if (event){
                //     event=window.event;
                // }一般不用了
                event=event||window.event;

           //在div2中显示坐标
           //      alert(event);//返回object MouseEvent
                var x=event.clientX;
                var y=event.clientY;
                // alert("x="+x+",y="+y);//测试一下是否出现x y 的值在页面中
                div2.innerHTML="x="+x+",y="+y;//把div2的内容替换成x y的值
            }

        };

    </script>
</head>
<body>
<script>
    /*1.onmousemove该事件将会在鼠标中元素中移动时触发
    *2.事件对象
    *   当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为参数传递进响应函数
    *   在事件的对象中封装了当前事件的相关的一切信息，比如鼠标的坐标，键盘哪个按键被按下，鼠标滚轮滚动的方向
    *3.clientX 可以获取鼠标指针的水平坐标
    * clientY 可以获取鼠标指针的垂直坐标
    * */
</script>
<div id="div1"></div>
<div id="div2"></div>

</body>
</html>